import './App.css'
import About from './pages/About'
import News from './pages/News'
import {Suspense} from 'react'
import {HashRouter as Router, NavLink,Routes, Route } from 'react-router-dom'
import {routes,createRouter} from './router/index'
import NotFound from './pages/NotFound'


import List from './components/List'

function App() {

  const createNav = (routes) => {
    return <>
      {/* {
        routes && routes.map(route => {
          return <NavLink to={route.path} key={route.key} style={{marginLeft:30}}> {route.name}
                    {
                      Array.isArray(route.children) ? createNav(route.children) : null
                    }
                </NavLink>
        })
      } */}

      {routes && routes.map(route => (
        <div key={route.key} style={{ marginLeft: 30 }}>
          {/* 如果有子路由，则父级不作为链接 */}
          {Array.isArray(route.children) ? (
            <span>{route.name}</span>
          ) : (
            <NavLink to={route.path}>{route.name}</NavLink>
          )}
          
          {/* 递归调用 createNav 来渲染子路由 */}
          {Array.isArray(route.children) && createNav(route.children)}
        </div>
      ))}
    </>
  }
  return <Router>
    <div>
      <div className='nav-box'>
        {createNav(routes)}
      </div>
      {/* 异步加载，否则 */}
      <Suspense>
        <Routes>
            {createRouter(routes)}
            <Route path='*' element={<NotFound />} />


            {/* {  /* 404 页面重定向 */}
            {/* <Route path="*" element={<Navigate to="/" replace />} /> */} */}
        </Routes>
      </Suspense>
    </div>
  </Router>
}

export default App
